<!--conf
<sample>
              <product version="2.6" edition="std"/>
                     <modifications>
                            <modified date="100609"/>
                     </modifications>
               </sample>
 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Integration with Grid and Grouping</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	
	<script>
	var barChart;
	window.onload = function(){
		barChart =  new dhtmlXChart({
            view:"bar",
            container:"chart_container",
            value:"#sales#",
            label:"#sales#",
            sort:{
                by:"#sales#",
                as:"int"
            },
            group:{
                by:"#data2#",
                map:{
                    author:["#data2#"],
                    sales:["#data0#","sum"]
                }
            },
            xAxis:{
                lines:false,
                template:"#author#"
            },
            padding:{
                left:0,
                right:0
            },
            color:"#45abf5",
            gradient:"rising",
            width:50
        });

        function refresh_chart(){
            barChart.clearAll();
            barChart.parse(mygrid,"dhtmlxgrid");
        };

        mygrid = new dhtmlXGridObject('gridbox');
        mygrid.setImagePath('../../../codebase/imgs/');
        mygrid.setSkin("dhx_skyblue")
        mygrid.loadXML("../../dhtmlxGrid/common/gridH.xml",refresh_chart);
        mygrid.attachEvent("onEditCell",function(stage){
            if (stage == 2)
                refresh_chart();
            return true;
        });
    }
</script>
</head>
<body>
	
	<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
	<hr>
	<div id="chart_container" style="width:600px;height:250px;"></div>

</body>
</html>
